<template>
    <div class="discuss">
        <header>
            <div class="up">
                <router-link :to="{path:'/listNR', query:{caricatureId:caricatureId} }" class="close">X</router-link>
                <span class="name">{{name}}</span>
            </div>
            <div class="down">
                <div class="fl">
                    <div class="sum">{{average==0 ? '0' : average*10}}</div>
                    <div class="xing">
                        <p>综合评分</p>
                        <div class="star">
                            <i class="bi bi-star"></i>
                            <i class="bi bi-star"></i>
                            <i class="bi bi-star"></i>
                            <i class="bi bi-star"></i>
                            <i class="bi bi-star"></i>
                        </div>
                        <div class="star2" :style="[{width:`${average*21.6}vw`}]">
                            <i class=" bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                        </div>
                    </div>
                </div>
                <div class="fr">
                    <span class="ico"></span>
                    <router-link class="pl" :to="{path:'/ping', query:{caricatureId:caricatureId,name:name,img:img} }">
                        评论
                    </router-link>
                </div>
            </div>
        </header>
        <main v-if="data.status!=1">
            <div class="yl" v-for="p in data" :key="p.id">
                <div class="up">
                    <img src="../assets/public/logo.png">
                    <div class="user">
                        <span class="name">{{p.username}}</span>
                        <div class="box">
                            <div class="box1">
                                <div class="star">
                                    <i class="bi bi-star"></i>
                                    <i class="bi bi-star"></i>
                                    <i class="bi bi-star"></i>
                                    <i class="bi bi-star"></i>
                                    <i class="bi bi-star"></i>
                                </div>
                                <div class="star2" :style="[{width:`${(((p.xing-0)/5)*21.36)}vw`}]">
                                    <i class=" bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                </div>
                            </div>
                            <div class="box2">
                                {{p.time}}
                                123
                            </div>
                        </div>
                    </div>


                </div>
                <div class="down">
                    <div class="open yl">
                        {{p.yl}}
                    </div>
                    <span class="hot"> <i class="bi bi-hand-thumbs-up-fill" @click="clickThumbs($event) "
                            data-thumbs="0" :data-sum="`${p.hot == null ? '0':p.hot}`" :data-id="p.id"></i> <span
                            class="sum">{{p.hot == null ? '0':p.hot}}</span></span>
                    <i class="bi bi-trash3-fill" @click="del(p.id)"></i>
                    <span class=" zk" v-if="p.yl.length>69" @click="foo($event)" data-is="true">展开</span>
                </div>
            </div>
        </main>
        <router-link v-if="data.status==1" class="sf"
            :to="{path:'/ping', query:{caricatureId:caricatureId,name:name,img:img} }">
            快来抢沙发
            <i></i>
        </router-link>
    </div>
</template>
<script>
const axios = require('axios');
const Qs = require('qs')

export default {
    name: 'discuss',
    data() {
        return {
            caricatureId: this.$route.query.caricatureId,
            name: this.$route.query.name,
            data: '',
            average: '',
            img: this.$route.query.img
        }
    },
    methods: {
        getpin() {
            let data = {
                caricatureId: this.caricatureId,
            }
            axios({
                method: 'post',
                url: `http://127.0.0.1/pingluen/pin`,
                data: Qs.stringify(data)
            }).then((data) => {
                this.data = data.data
                let sum = 0
                var xx = 0
                if (data.data.status != 1) {
                    for (let i = 0; i < data.data.length; i++) {
                        const element = data.data[i];
                        let index = element.xing - 0
                        sum += index
                        xx++
                    }
                    if (xx == 0) {
                        this.average = 0
                    } else {
                        let aa = (sum / xx) / 5
                        this.average = aa
                    }
                }
            })
        },
        foo(e) {
            let el = e.target
            let is = el.getAttribute('data-is')
            if (is == 'true') {
                el.setAttribute('data-is', `false`)
                el.parentNode.querySelector('.yl').className = 'yl'
                el.parentNode.querySelector('.zk').innerText = '收起'
            } else {
                el.setAttribute('data-is', `true`)
                el.parentNode.querySelector('.yl').className = 'open yl'
                el.parentNode.querySelector('.zk').innerText = '展开'
            }
        },
        setPin(str, id) {
            let data = {
                id: id,
                hot: str
            }
            axios({
                method: 'post',
                url: `http://127.0.0.1/pingluen/pin`,
                data: Qs.stringify(data)
            })
        },
        clickThumbs(e) {
            let el = e.target
            let ss = el.getAttribute('data-thumbs')
            let sum = el.getAttribute('data-sum')
            let id = el.getAttribute('data-id')
            if (ss == 0) {
                el.style['color'] = 'skyblue'
                el.parentNode.querySelector('.sum').innerText = sum - 0 + 1
                el.setAttribute('data-thumbs', '1')
                this.setPin('up', id)
            } else if (ss == 1) {
                el.style['color'] = '#8e8e90'
                el.parentNode.querySelector('.sum').innerText = sum - 0
                el.setAttribute('data-thumbs', '0')
                this.setPin('down', id)
            }
        },
        del(id) {
            let data = {
                del: 'del',
                id: id
            }
            axios({
                method: 'post',
                url: `http://127.0.0.1/pingluen/pin`,
                data: Qs.stringify(data)
            }).then(() => {
                location.reload();
            })
        }
    },
    mounted() {
        this.getpin()
    }
}
</script>
<style lang="less" scoped>
.discuss {
    position: relative;
    top: -12.5333vw;
    width: 100%;
}

.star2 {
    margin-top: -5.0333vw;
    width: 0;
    height: 5.3333vw;
    overflow: hidden;
}

.star,
.star2 {
    color: #ff9b11;
    font-size: 4.2667vw;
    display: flex;

    i {
        flex-shrink: 0
    }
}

header {
    width: 100%;
    position: relative;
    background-color: #41344b;
    height: 33vw;
    z-index: 99999999;

    .up {
        position: fixed;
        top: 0;
        width: 100%;
        height: 7.5333vw;
        background-color: #41344b;
        display: flex;
        padding: 2.6667vw 1.3333vw;

        .close {
            display: block;
            font-size: 5.3333vw;
            color: white;
        }

        .name {
            display: block;
            font-size: 5.3333vw;
            color: white;
            font-size: 4.2667vw;
            margin: 0 auto;
        }
    }

    .down {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        bottom: 0vw;
        padding-bottom: 2.6667vw;

        .fl {
            display: flex;
            margin-left: 2.6667vw;
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            .sum {
                font-size: 13.3333vw;
                font-weight: 600;
                color: white;
                max-width: 18.7vw;
                overflow: hidden;
            }

            .xing {
                margin-left: 2.6667vw;

                p {
                    font-size: 3.4667vw;
                    color: #cdc6d8;
                    margin: 0;
                }

            }
        }

        .fr {
            margin-right: 2.6667vw;
            display: flex;
            width: 19.6vw;
            height: 5.3333vw;
            background-color: #6b5d6c;
            padding: 1.3333vw 2.6667vw;
            border-radius: 5.3333vw;
            align-items: center;
            justify-content: center;

            .ico {
                display: block;
                width: 4vw;
                height: 4vw;
                background: url(../assets/public/pinglun.png) no-repeat;
                background-size: 100% 100%;
            }

            .pl {
                color: white;
                display: block;
                width: 10.6667vw;
                margin-left: 2.6667vw;
                font-size: 4.2667vw;
            }
        }
    }
}

main {
    margin-top: 2.6667vw;

    .up {
        display: flex;
        align-items: center;

        .name {
            flex-wrap: 400;
            font-size: 3.7333vw;
        }

        img {
            width: 8.5333vw;
            height: 8.5333vw;
            border-radius: 50%;
            margin-right: 3.7333vw;
        }

        .box {
            display: flex;

            .box2 {
                margin-left: 1.3333vw;
                font-size: 3.2vw;
                line-height: 5.3067vw;
                color: #8e8e90;
            }
        }
    }

    .down {
        margin-top: 2.6667vw;
        padding-left: 12.2vw;
        padding-bottom: 2.6667vw;
        padding-right: 2.6667vw;
        font-size: 3.7333vw;
        color: #8e8e90;
        word-break: break-all;

        .open {
            width: 85.0667vw;
            max-height: 26.6667vw;
            margin-bottom: 2.6667vw;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }

        .hot {
            color: #8e8e90;
        }

        .zk {
            font-size: 3.4667vw;
            color: skyblue;
            float: right;
            margin-right: 2.6667vw;

        }

        .bi-trash3-fill {
            float: right;
            margin-right: 2.6667vw;
            color: #8e8e90;
        }
    }
}

.sf {
    display: block;
    width: 100%;
    height: 16vw;
    margin-top: 26.6667vw;
    text-align: center;
    color: #8e8e90;
    font-size: 8vw;

    i {
        position: relative;
        top: -11.2vw;
        left: 21.3333vw;
        display: block;
        width: 53.3333vw;
        height: 80vw;
        background: url(../assets/public/手指.gif) no-repeat;
        background-size: 100% auto;
    }
}
</style>